桌面端和移动端的设计差异性

最近在做跨平台产品，设计桌面端时一直有个疑惑：桌面端是不是把移动端的设计直接平移过来就行，还是说会有差异性？这些差异性背后的原因又是什么？于是做了一些简单的研究，下面与大家分享下桌面端和移动端的设计异同点（都指客户端。之所以强调这点是因为桌面客户端和web端又会有一些差异）

💂

整体的一致性

首先，跨平台产品的设计整体是期望趋于一致的，这样不仅可以降低用户的认知成本，也可以降低设计成本，甚至可以降低开发成本（更加统一的接口）。

从布局上而言，桌面端的界面可以理解为是移动端的多个界面拼接在一起（上图）。从功能上而言，桌面端的功能也和移动端的整体一致，只是在视图层面和控件层面会有所差异。比如下图所示案例，Mac端“新建提醒”和iOS端整体是一致的，只是使用的控件和视图不太一样。

但局部而言，桌面端和移动端仍然有着很多差异性。在设计桌面端时，尊重这些差异性是十分有必要的。下面的篇幅便来介绍下这些差异性。大家也可以思考下，这些差异性背后的深层原因是什么？

💂

信息架构差异

1. 一维布局 vs 二维布局

界面布局层面而言，移动端的布局一般是一维的，只有纵向布局，加之以屏幕空间有限，所以整体布局都会比较简单，能够容纳的信息比较有限。

桌面端的布局一般是二维的，不仅有纵向维度，还有横向维度，大部分以横向维度为主。加之以屏幕空间较大，其能够容纳的信息就多出很多。比如桌面端经典的“多栏布局”，可以直接把移动端3个层级的界面全部融合在一个界面中（下图）。

桌面端的二维布局，一方面降低了信息架构的深度，另一方面也会让单个界面的信息量大大增加。在布局设计时需要投入更多的精力对界面元素进行归类、分层、排序。

2. 信息隐藏 vs 信息露出

桌面端尺寸更大，这带来的好处是可以平铺出来更多的信息。不用像移动端那样，只能放出来最核心的信息，其他信息必须采用折叠、删除的方式做隐藏。

比如上图所示的腾讯文档案例，移动端的文档编辑器，设计师必须把各种功能进行归类，然后放到各个入口中，点击入口后才能看到具体的功能。而在桌面端完全可以把这些功能平铺露出，其信息结构是不同的。

3. 跳转操作 vs 就地操作

对于具有一定流程的功能，移动端往往需要跳转界面才能完成操作，而桌面端可以就地完成操作。

比如上图1所示的移动邮件功能，把一封QQ邮箱中的邮件移动到iCloud邮箱中，需要跳转2个界面才能完成。而桌面端只需要在下拉列表里就能直接完成，无需跳转界面。

再比如上图2所示的设置界面，在移动端更改选项、重新命名等操作往往需要跳至新界面，而桌面端中大部分都可以当前页直接操作。

桌面端的这种“就地操作”逻辑（或者叫情境式操作），几乎可以覆盖大部分的中小型功能，是和移动端差异性较大的一种设计思路。

4. 界面多又深 vs 界面少又浅

上面介绍的3个桌面端信息架构特点：二维布局、信息露出、就地操作，其实刚好决定了桌面端的整体界面结构特点-界面少且浅。一般只有几个主界面，层级方面只有1-2级，剩下的层级由弹窗、浮层、下拉菜单、右击菜单、点击菜单、tooltip等形式承载。

反观移动端，大部分的模块分类、功能流程，大多需要借助新界面来承载，所以导致界面很多，层级也很深。

比如上图的例子，是“飞书”的设置功能。可以看到在移动端，设置功能的界面很多，层级也很深，而在桌面端只要1个界面，再搭配一些弹窗，就基本解决问题了。

💂

样式差异

5. 元素大 vs 元素小

移动端由于使用手指交互，所以每个可交互元素的尺寸都需要大于7mm（iOS HIG规定，Android平台也类似），这也就导致移动端的元素整体偏大一些。

而桌面端采用鼠标交互，鼠标指针的尺寸比手指小很多，也灵活很多，所以桌面端的元素可以做得比较小（是可以，不是必须）。

以上图Notion为例，同样的列表在移动端的高度明显比桌面端要高出不少。再比如上图的微信案例，同样的“创建群”界面，移动端的搜索框明显比桌面端要高很多，复选框也会大一些。

6. 排布松散 vs 排布紧凑

由于移动端元素尺寸相对较大，以及手指灵活度没有鼠标高，容易误操作。所以移动端的元素排布一般相对比较松散一些，且不会出现大量元素密集排布的情况。而桌面端的排布可以做的比较紧凑一些，也有能力承载大量密集的元素。

比如上图所示的Word案例中，移动端的工具栏，按钮数量少，排布松散。但桌面端的工具栏，按钮很多，排布紧紧凑

7. 多样对齐 vs 左上对齐

移动端屏幕比较小，用户视线可以覆盖整个屏幕。所以元素的对齐方式相对比较均衡，左对齐、右对齐、上对齐、下对齐、居中对齐都有，倾向性不大。比如上图中的印象笔记移动端界面。

桌面端窗口尺寸相对较大，用户视线无法覆盖整个窗口，需要移动视线才能看清全貌。用户视线一般从左上进入，所以元素的对齐方式优选“左对齐”和“上对齐”。尤其是“上对齐”的倾向性很强，很少有产品把比较重要的信息“下对齐”排布，因为这样很容易被用户忽略。

💂

交互方式差异

8. 手指简单交互 vs 鼠标复杂交互

移动端采用手指交互，交互方式相对比较简单，以点击（tap）为主，各类手势为辅。

桌面端采用鼠标交互，交互方式相对复杂，单击、双击、右击、hover、拖拽、划选、滚轮滚动都是用户经常使用的交互方式。另外，鼠标指针还会有很多状态（如上图），这些状态的变化可以实现非常丰富的交互模式。上述特点对设计的影响有以下几点：

• 所有可交互元素，一般都需要定义普通态和hover态

• 大部分的数据对象，比如文字、图片、文件、列表项，都需要考虑定义选中态、右击菜单、双击逻辑

• 鼠标指针可需要进行一些定义，比如鼠标放到布局分隔线上时变成”水平调整大小箭头“

9. 软键盘 vs 硬键盘

移动端采用软键盘的形式，场景式出现，没有快捷键逻辑，输入成本相对较高。

桌面端采用硬键盘的形式，输入成本相对较低。有丰富的快捷键逻辑，且需要设计师定义快捷键，比如一些通用的快捷键：复制、粘贴、全选等。对于一些高频操作的功能，也需要定义快捷键，比如发送消息、下一步。另外，对于比较成熟的桌面端产品，原则上需要支持“全键盘交互”，也就是说可以脱离鼠标实现所有交互，而这些键盘交互逻辑也是需要设计师定义的。

10，单窗口 vs 多窗口

移动端是单一窗口，所有操作都是针对当前窗口的，很少有跨窗口逻辑。

桌面端是多窗口逻辑，可以同时存在多个窗口，且各个应用之间也可以交互。所以在设计时需要定义这些交互逻辑（窗口任务并行 & 窗口间交互 & 应用间交互）。比如网盘应用中，用户是否可以把文件从一个窗口拖动到另外一个窗口，是否可以拖到桌面上保存，具体的交互逻辑又是怎样的。最后，还需要定义窗口是否是模态的，如果是模态的，则用户无法操作应用下的其他窗口。

五，控件/模式差异

桌面端的控件/模式（Components & Patterns）和移动端也有着诸多差异，这里列举了一部分比较典型的差异。

弹窗：移动端和桌面端的弹窗样式有所差异。按钮位置也会有所差异，移动端的"确定性"按钮在右侧，桌面端中MacOS的在右侧，Windows的在左侧。

浮层：移动端由于屏幕尺寸限制，较少使用浮层控件。而浮层在桌面端则非常好用，它可以做成信息详情浮层、二次确认浮层、复合型浮层等。相对于弹窗而言，它的打扰性很小，而且“就地操作”，效率更高，同时能够承载的信息也相对比较丰富，是笔者很喜欢用的一个桌面端视图控件。

tooltip：移动端理所当然是没有tooltip的。而桌面端tooltip的出镜率就很高了，一般有2个作用：一个是用于解释一些按钮的功能，另一个是展示被截断字段的完整信息（均见上图）。

更多菜单：移动端的更多菜单采用的控件是左滑菜单（iOS）或长按菜单（Android），桌面端采用的则是右击菜单。

除了上面所说的控件，其实还有很多其他控件也是不同的，再此不一一细述。比如：标签栏（无文字 vs 有文字）、面包屑（少用 vs 常用）、单选（单选列表 vs 单选按钮）、开关（开关 vs 复选框）、下拉（下拉框 vs Actionsheets）...

另外，还有很多和系统交互的模式也是不同的。比如上传、下载、保存、打开、系统任务栏、系统推送、后台运行等。不过这些差异性只需跟随系统即可，没有特别需要注意的，也就不再赘述了。

💂

最后

桌面端和移动端原本是相对比较割裂的两种平台，设计语言相差较大，用户的使用习惯也相差较大，所以在设计时还是要注意这些差异性。

但这些年桌面端和移动端也在趋于融合。一方面是因为跨平台技术的发展：Windows系统可以在各种设备上运行、iOS可以在Mac上运行、跨平台语言越来越完善，让平台一体化可以实现；另一方面是因为移动端的能力逐日变强：移动端的功能集和桌面端越来越趋于一致，所以产品设计层面也就理所应当趋于一致了。

也就是说，移动端和桌面端的差异性是在变化的，所以大家不用过于拘泥，可以用更加开放的态度看待“差异性”问题。就像几年前关于iOS和Android的差异性争议一样，那会儿大家做APP都会出两套设计稿，微信甚至在Android版上取消了“比较iOS”的底部标签栏。但这些都已成为了历史，这两个平台现在越来越像了，大家都放下了包袱，融合终究大势所趋。

 撰文 ✎ 崇书庆 

图片 ✎ 原创/网络

未 经 允 许 请 勿 转 载 到 其 他 公 众 号

在 首 页 输 入 关 键 词 转 载 获 得 授 权

···········································